<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
	<style type="text/css">
		#calculator
		{
			margin: 0 auto;
			border: #000  2px solid;
			border-radius: 15px 15px 15px 15px;
			width: 300px;
			height: 460px;
			background: #000000;
		}
		#hiddentxt
		{
			height: 100px;
		}
		#txt
		{
			width: 88%;
			height: 80px;
			border-radius: 12px 12px 12px 12px;
			font-size: 24px;
			font-weight: bold;
			background: #000;
			color: white;
			border: #fff 5px solid;
			margin-top: 15px;
			margin-left:12px;
			font-family: "Comic Sans MS", "Leelawadee UI";
		}
		input[type=button]
		{
			width: 56px;
			height: 56px;
			margin-top: 10px;
			margin-left: 13px;
			border-radius: 10px;
			font-size: 20px;
			font-weight: bold;
			background: #fff;
			font-family:"Comic Sans MS";
		}
		#Zero,#AC
		{
			width: 129px;
		}
		input[type=button]:hover
		{
			color: #fff;
			background: #000;
			animation-name:mybutton;
			animation-duration: 0.8s;
       	    animation-timing-function:ease-in-out;
		}
		@keyframes mybutton
		{
			0%
			{
				background: #fff;
				color: #000;
			}
	
			100%
			{
				background:#000;
				color: #fff;
			}
		}
	</style>
</head>

<body>
	<div id="calculator">
		
	<input type="text" id="txt"  readonly><br>
	<input type="button" id="AC" value="AC" >
	<input type="button"   value="/">
	<input type="button"   value="%">
	<br>
		
	<input type="button" id="Seven"  value="7">
	<input type="button" id="Eight"  value="8">
	<input type="button" id="Nine"  value="9">
	<input type="button"   value="+">
	<br>
		
	<input type="button" id="Four"  value="4">
	<input type="button" id="Five"  value="5">
	<input type="button" id="Six"  value="6">
	<input type="button"  value="-">
	<br>
		
	<input type="button" id="One"  value="1" >
	<input type="button" id="Two"   value="2"  >
	<input type="button" id="Three"  value="3">
		<input type="button"   value="*">
<br>

	<input type="button" id="Zero"  value="0">
	<input type="button" id="Dot"  value=".">
	<input type="button"  value="=">
		
	</div>
	
	
</body>
</html>
